<template>
  <div>
    <r-table
      :tableHandles="tableHandles"
      :isSelection="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      :isHandle="true"
      @refresh="init()"
    ></r-table>
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="200px"
      dialogWidth="1000px"
      :isHandle="true"
    />

    <!-- 点击Edit按钮打开的Template  formRules2提示框  formHandle2Edit页面的Template菜单   formHandle2取消与确认按钮 formData2Edit页面菜单的Data源-->
    <r-form
      labelWidth="150px"
      :isHandle="true"
      :formRules="formRules2"
      :formCols="formCols2"
      :formHandle="formHandle2"
      :formData="formData2"
      ref="elForm2"
      :inline="false"
      dialogWidth="850px"
    >
    </r-form>
    <!-- ImportEmployDetails按钮的Template -->
    <ChildEquipment_alarm
      :visible.sync="visible"
      :useDetail="useDetail"
    ></ChildEquipment_alarm>
  </div>
</template>
<script>
import ChildEquipment_alarm from "./cus/ChildEquipment_alarm.vue";

export default {
  components: {
    ChildEquipment_alarm //设备警报Details按钮
  },
  data() {
    return {
      isNewAlarm: true, //ControlEdit页面的设备id
      visible: false, //ControlDetails按钮的显示隐藏
      // 表单中 Details按钮的Data
      useDetail: {
        id: "", //设备专属身份ID
        deviceNo: "", //设备id
        fire: 0, //消防警报
        lightning: 0, //雷击警报
        maintainDoor: 0, //维修门Status
        smoke: 0, //烟感警报
        urgencyStop: 0, //急停警报
        water: 0 //浸水警报
      },

      searchData: {
        deviceNo: ""
      },

      //Add设备警告信息按钮
      tableHandles: [
        {
          label: "Add设备警告信息",
          type: "primary",
          plain: true,
          handle: e => {
            this.formData2.id = null;
            this.isNewAlarm = false;
            this.add();
          }
        }
      ],

      tableData: [], //接收后端
      // 表格信息
      tableCols: [
        {
          label: "设备ID",
          prop: "deviceNo"
        },

        {
          label: "Online",
          prop: "offLine",
          formatter: e => {
            if (e.offLine == 0) {
              return "Online";
            } else {
              return "Offline";
            }
          }
        },
        {
          label: "维修门Status",
          width: 120,
          prop: "maintainDoor",
          itemClass: e =>
            e.maintainDoor == 0
              ? "success"
              : e.maintainDoor !== 0
              ? "danger"
              : "",
          formatter: e => {
            if (e.maintainDoor == 0) {
              return "关闭";
            } else {
              return "开启";
            }
          }
        },
        {
          label: "雷击警报",
          prop: "lightning",
          itemClass: e =>
            e.lightning == 0 ? "success" : e.lightning !== 0 ? "danger" : "",
          formatter: e => {
            if (e.lightning == 0) {
              return "正常";
            } else {
              return "报警";
            }
          }
        },
        {
          label: "消防警报",
          prop: "fire",
          itemClass: e =>
            e.fire == 0 ? "success" : e.fire !== 0 ? "danger" : "",
          formatter: e => {
            if (e.fire == 0) {
              return "正常";
            } else {
              return "报警";
            }
          }
        },
        {
          label: "烟感警报",
          prop: "smoke",
          itemClass: e =>
            e.smoke == 0 ? "success" : e.smoke !== 0 ? "danger" : "",
          formatter: e => {
            if (e.smoke == 0) {
              return "正常";
            } else {
              return "报警";
            }
          }
        },
        {
          label: "浸水警报",
          prop: "water",
          itemClass: e =>
            e.water == 0 ? "success" : e.water !== 0 ? "danger" : "",
          formatter: e => {
            if (e.water == 0) {
              return "正常";
            } else {
              return "报警";
            }
          }
        },
        {
          label: "急停警报",
          prop: "urgencyStop",
          itemClass: e =>
            e.urgencyStop == 0
              ? "success"
              : e.urgencyStop !== 0
              ? "danger"
              : "",
          formatter: e => {
            if (e.urgencyStop == 0) {
              return "正常";
            } else {
              return "报警";
            }
          }
        },
        {
          label: "Time Of Reporting",
          width: 150,
          prop: "stime"
        },
        {
          label: "Operations",
          type: "button",
          width: 350,
          btnList: [
            {
              label: "Details",
              type: "success",
              plain: true,
              icon: "el-icon-folder-opened",
              handle: async row => {
                const res = await this.apis.getDeviceWarningss(row.id);
                (this.useDetail.deviceNo = row.deviceNo),
                  (this.useDetail.fire = row.fire),
                  (this.useDetail.lightning = row.lightning),
                  (this.useDetail.maintainDoor = row.maintainDoor),
                  (this.useDetail.smoke = row.smoke),
                  (this.useDetail.urgencyStop = row.urgencyStop),
                  (this.useDetail.water = row.water),
                  (this.useDetail.id = row.id),
                  (this.visible = true);
                console.log(res);
              }
            },
            {
              label: "Edit",
              type: "primary",
              icon: "el-icon-edit",
              plain: true,
              handle: row => this.add(row)
            },
            {
              label: "Delete",
              type: "danger",
              plain: true,
              icon: "el-icon-delete",
              handle: async row => {
                this.$confirm("确定要Delete吗?", "Hint", {
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  type: "warning"
                })
                  .then(async () => {
                    var res = await this.apis.delDeviceWarning(row.id, {});
                    this.$message({
                      type: "success",
                      message: "DeleteSuccess!"
                    });
                    this.init();
                  })
                  .catch(() => {});
              }
            }
          ]
        }
      ],
      // 分页 每页的条数 总页数  总条数
      tablePage: { limit: 10, page: 1, total: 0 },

      formData: {
        name: "",
        money: "",
        giftMoney: "",
        status: ""
      },
      formCols: [
        { type: "input", label: "Package Name", width: 350, prop: "name" },
        {
          type: "input",
          label: "PackageMoney",
          width: 350,
          prop: "money",
          remark: "元"
        },
        {
          type: "input",
          label: "Gift Amount",
          width: 350,
          prop: "giftMoney",
          remark: "元"
        },
        { type: "switch", label: "上线/下线", width: 350, prop: "status" }
      ],
      formRules: {
        name: [
          {
            required: true,
            message: "Please InputPackage Name",
            trigger: "blur"
          }
        ],
        money: [
          {
            required: true,
            message: "Please InputPackageMoney",
            trigger: "blur"
          }
        ],
        giftMoney: [
          {
            required: true,
            message: "Please InputPackageMoney",
            trigger: "blur"
          }
        ]
      },
      // 取消与确认按钮
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ],

      // 点击Edit按钮出现的表单的 参数
      formData2: {
        id: "", //设备专属身份ID
        deviceNo: "", //设备id
        // fire: 0 ? '异常' : '正常',//消防警报
        // lightning: 0 ? '异常' : '正常',//雷击警报
        // maintainDoor: 0 ? '开启' : '关闭',//维修门Status
        // smoke: 0 ? '异常' : '正常',//烟感警报
        // urgencyStop: 0 ? '异常' : '正常',//急停警报
        // water: 0 ? '异常' : '正常',//浸水警报

        fire: 0, //消防警报
        lightning: 0, //雷击警报
        maintainDoor: 0, //维修门Status
        smoke: 0, //烟感警报
        urgencyStop: 0, //急停警报
        water: 0 //浸水警报
      },
      // 点击Edit按钮出现的表单
      formCols2: [
        {
          type: "input",
          label: "设备ID",
          placeholder: "Please Input设备id",
          width: 350,
          prop: "deviceNo",
          isDisabled: e => {
            // ControlEdit页面的设备id能不能修改，分两种情况，1有id，2没有id，2又有两种情况，Add的要Control设备id的长度，Edit的即使没有不能修改
            if (e.deviceNo) {
              // 这里的if判断是区分在有id的情况下，Add 与Edit的页面，当为Add，可以输入16位，否则就是Edit，就不能修改id
              if (!this.isNewAlarm && e.deviceNo) {
                // this.isNewAlarm = true
                return e.deviceNo.length == 16 ? true : false;
              } else {
                return true;
              }
            }
            // 排除没有设备id的情况下，打不开Edit按钮
            else {
              // Add的 ，可以修改id
              if (!this.isNewAlarm) {
                return e.deviceNo.length == 16 ? true : false;
              }
              // Edit的，即使没有id也不能修改
              else {
                e.deviceNo = "-";
                return true;
              }
            }
          }
        },
        {
          type: "select",
          label: "消防警报",
          placeholder: "Please Enter  0代表正常  Else代表异常",
          width: 350,
          prop: "fire",
          options: [
            { label: "正常", value: 0 },
            { label: "异常", value: 1 }
          ]
        },
        {
          type: "select",
          label: "雷击警报",
          placeholder: "Please Enter  0代表正常  Else代表异常",
          width: 350,
          prop: "lightning",
          options: [
            { label: "正常", value: 0 },
            { label: "异常", value: 1 }
          ]
        },
        {
          type: "select",
          label: "维修门Status",
          placeholder: "Please Enter  0代表关闭  Else代表开启",
          width: 350,
          prop: "maintainDoor",
          options: [
            { label: "关闭", value: 0 },
            { label: "开启", value: 1 }
          ]
        },
        {
          type: "select",
          label: "烟感警报",
          placeholder: "Please Enter  0代表正常  Else代表异常",
          width: 350,
          prop: "smoke",
          options: [
            { label: "正常", value: 0 },
            { label: "异常", value: 1 }
          ]
        },
        {
          type: "select",
          label: "急停警报",
          placeholder: "Please Enter  0代表正常  Else代表异常",
          width: 350,
          prop: "urgencyStop",
          options: [
            { label: "正常", value: 0 },
            { label: "异常", value: 1 }
          ]
        },
        {
          type: "select", //决定是输入框还是下拉框
          label: "浸水警报",
          placeholder: "Please Enter  0代表正常  Else代表异常",
          width: 350,
          prop: "water",
          // radios: [{ label: '正常', value: 0 }, { label: '异常', value: 1 }],
          options: [
            { label: "正常", value: 0 },
            { label: "异常", value: 1 }
          ]
        }
      ],

      // Edit按钮提示框
      formRules2: {
        // id: [{ required: true, message: "Please Input设备专属身份ID ~16位数字", trigger: "blur" }],
        deviceNo: [
          { required: true, message: "Please Input设备id", trigger: "blur" }
        ],
        fire: [
          {
            required: true,
            message: "Please Input消防警报Status 0代表正常",
            trigger: "blur"
          }
        ],
        lightning: [
          {
            required: true,
            message: "Please Input雷击警报Status 0代表正常",
            trigger: "blur"
          }
        ],
        maintainDoor: [
          {
            required: true,
            message: "Please Input维修门Status 0代表正常",
            trigger: "blur"
          }
        ],
        smoke: [
          {
            required: true,
            message: "Please Input烟感警报Status 0=正常  0代表正常",
            trigger: "blur"
          }
        ],
        urgencyStop: [
          {
            required: true,
            message: "Please Input急停警报Status  0代表正常",
            trigger: "blur"
          }
        ],
        water: [
          {
            required: true,
            message: "Please Input浸水警报Status 0代表正常",
            trigger: "blur"
          }
        ]
      },
      // Edit页面的取消与确认按钮
      formHandle2: [
        {
          label: "Cancel",
          // handle: (e) => this.elFormVisible("", "elForm2"),
          handle: e => {
            console.log(e);
            this.elFormVisible("", "elForm2"), (this.isNewAlarm = true);
            this.init();
          }
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit2()
        }
      ]
    };
  },

  computed: {},
  mounted() {
    this.init();
    // this.mealExchange_list();
  },
  methods: {
    // 拿到后端返回渲染表格的Data
    async init() {
      let parm = {
        // ...this.searchData,
        // ...{
        //   deviceNo: this.searchData.deviceNo,
        //   pageNum: this.searchData.pageNum,
        //   pageSize: this.searchData.pageSize
        // },
        ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit
        }
      };
      let res = await this.apis.getDeviceWarningListss(
        this.tablePage.page,
        this.tablePage.limit,
        ...this.searchData
      );
      if (res) {
        this.tableData = res.rows;
        this.tablePage.total = res.total;
      }
    },

    async elFormSubmit() {
      this.formData.state = this.formData.status == true ? 1 : 2;
      if (this.formData.id) {
        let res = await this.api.packupdate(this.formData);
        if (res) {
          this.formData.id = "";
          this.elFormVisible();
          this.init();
        }
      } else {
        let res = await this.api.packadd(this.formData);
        if (res) {
          this.elFormVisible();
          this.init();
        }
      }
    },
    async changestate(row) {
      let res = await this.apis.device_updata({
        id: row.id,
        useStatus: row.useStatus
      });

      this.$message({
        message: "OperationsSuccess！",
        type: "success"
      });
    },
    //Add 修改 按钮  调用的方法
    add(row) {
      console.log(row);
      if (row) {
        this.formData2.id = row.id;
        this.formData2.deviceNo = row.deviceNo;
        this.formData2.maintainDoor = row.maintainDoor;
        this.formData2.lightning = row.lightning;
        this.formData2.fire = row.fire;
        this.formData2.smoke = row.smoke;
        this.formData2.water = row.water;
        this.formData2.urgencyStop = row.urgencyStop;
      }
      // Add进来打开，Whole清空
      else {
        this.formData2.id = "";
        this.formData2.deviceNo = "";
        this.formData2.maintainDoor = "";
        this.formData2.lightning = "";
        this.formData2.fire = "";
        this.formData2.smoke = "";
        this.formData2.water = "";
        this.formData2.urgencyStop = "";
      }

      this.elFormVisible("", "elForm2").then(res => {
        console.log(res);
      });
    },

    // Edit按钮出现后的Edit页面的  绑定确认按钮的方法
    async elFormSubmit2() {
      console.log(111111);
      this.$refs.elForm2.$refs.ruleForm.validate(async valid => {
        if (valid) {
          if (this.formData2.id) {
            let res = await this.apis.editDeviceWarning(this.formData2);
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.msg
            });
            if (res) {
              this.init();
              this.elFormVisible("", "elForm2");
            }
          } else {
            let res = await this.apis.addDeviceWarning(this.formData2);
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.msg
            });
            if (res) {
              this.init();
              this.elFormVisible("", "elForm2");
            }
          }
        }
      });
    },

    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });

      this.formData.status = row["state"] == 1 ? true : false;
      this.formData.id = row.id;
      // if (this.formCols[1].label == '登录密码') {
      //     this.formCols.splice(1, 1)
      // }

      this.elFormVisible();
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}

.Tip {
  margin-left: 20px;
}

#r-result {
  width: 100%;
}
</style>
